<template>
  <div id="app">
    <VFormDesigner ref="vfDesignerRef" :global-dsv="globalDsv" :designer-config="designerConfig">
      <template #customToolButtons>
        <el-button type="text" @click="doTest">测试btn</el-button>
      </template>
    </VFormDesigner>
  </div>
</template>

<script>
import VFormDesigner from './components/form-designer/index.vue'

export default {
  name: 'App',
  components: {
    VFormDesigner,
  },
  data() {
    return {
      //全局数据源变量
      globalDsv: {
        testApiHost: 'http://www.test.com/api',
        testPort: 8080,
      },
      designerConfig: {
        languageMenu: false,
        externalLink: false,
        formTemplates: false,
        eventCollapse: false,
        clearDesignerButton: true,
        previewFormButton: true,
        //是否显示导入JSON按钮
        importJsonButton: false,
        //是否显示导出JSON器按钮
        exportJsonButton: true,
        //是否显示导出代码按钮
        exportCodeButton: false,
        //是否显示生成SFC按钮
        generateSFCButton: false,
        removeFieldWidgetBefore: this.removeFieldWidgetBefore,
        listenerFieldWidgetListChange: this.listenerFieldWidgetListChange,
        undoHistoryStepBefore: this.undoHistoryStepBefore,
        redoHistoryStepBefore: this.redoHistoryStepBefore,
      }
    }
  },
  mounted() {

  },
  computed: {
    //
  },
  methods: {
    doTest() {
      let fieldList = this.$refs.vfDesignerRef.getFieldWidgets(null, true)
      console.log('test', fieldList)
    },
    removeFieldWidgetBefore(fieldName) {
      let result = true
      console.log("removeFieldWidgetBefore", fieldName)
      return result
    },
    listenerFieldWidgetListChange(val) {
      console.log("listenerFieldWidgetListChange", val)
    },
    undoHistoryStepBefore(currentWidgetList, newWidgetList, currentFormConfig, newFormConfig) {
      console.log("undoHistoryStepBefore newWidgetList", newWidgetList)
      console.log("undoHistoryStepBefore newFormConfig", newFormConfig)
      return true
    },
    redoHistoryStepBefore(currentWidgetList, newWidgetList, currentFormConfig, newFormConfig) {
      console.log("redoHistoryStepBefore newWidgetList", newWidgetList)
      console.log("redoHistoryStepBefore newFormConfig", newFormConfig)
      return true
    },

  }
}
</script>

<style lang="scss">
  #app {
    height: 100%;
  }
</style>
